<template>
  <IndexFieldItem
    v-slot="{ hasValue, value }"
    :resource-name="resourceName"
    :resource-id="resourceId"
    :row="row"
    :field="field"
  >
    <TextCollapse
      v-if="hasValue"
      v-model:collapsed="collapsed"
      :text="value"
      :class="collapsed ? 'whitespace-pre' : 'w-96'"
      :length="100"
    />

    <span v-else>&mdash;</span>
  </IndexFieldItem>
</template>

<script setup>
import { ref } from 'vue'

defineProps(['column', 'row', 'field', 'resourceName', 'resourceId'])

const collapsed = ref(true)
</script>
